<template>
  <basic-container :btnFlag=true>
    <div class="card-border"
         style="padding-bottom: 28px;">
      <card-header :header-data="headerData"></card-header>
      <div class="step-group"
           style="margin: 66px 20px 1px;">
        <!-- <el-steps :active="3">
          <el-step title="上报报告"
                   icon="el-icon-edit"></el-step>
          <el-step title="政府"
                   icon="el-icon-upload"></el-step>
          <el-step title="党委"
                   icon="el-icon-message-solid"></el-step>
          <el-step title="政府"
                   icon="el-icon-upload"></el-step>
          <el-step title="人大"
                   icon="el-icon-picture"></el-step>
        </el-steps> -->
        <el-steps :active="2">
          <el-step title="上报报告"
                   icon="el-icon-edit"></el-step>
          <el-step title="政府"
                   icon="el-icon-edit"
                   class="transform-deg_two"></el-step>
          <el-step title=""
                   icon="el-icon-edit"
                   class="transform-deg_line_two"></el-step>
          <el-step title="党委"
                   icon="el-icon-upload"
                   style="color:#67c23a"
                   class="beian_two"></el-step>
          <el-step title="人大"
                   icon="el-icon-upload"
                   style="margin-top: 35px;margin-left: -250px;"></el-step>

        </el-steps>
      </div>
      <p style="padding-left:20px;font-weight:600;font-size:16px">党委办理结果：党委已同意</p>
      <div style="text-align: center; margin-top: 40px;margin-bottom: 40px;">
        <el-button type="warning"
                   @click="submitValidate()">确定</el-button>
        <el-button type="info"
                   @click.stop="goBack()">关闭</el-button>
      </div>
      <el-collapse v-model="activeNameshz">
        <el-collapse-item name="3">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">中期评估报告信息</div>
            </div>
          </template>
          <div class="searchDetail">
            <report-detail @putData="putData"
                           :reportId="$route.query.reportId"></report-detail>
          </div>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">部门意见汇总</div>
            </div>
          </template>
          <avue-crud :data="otherOpninionListData"
                     :option="otherOpninionTableOption"
                     :page="otherOpninionPage"
                     :table-loading="otherOpninionTableLoading"
                     @on-load="getOtherOpninionList"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     class="avuecrud">
          </avue-crud>
        </el-collapse-item>

        <el-collapse-item name="2">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">报告流程处理历史信息</div>
            </div>
          </template>
          <avue-crud :data="historyData"
                     :option="option"
                     :page="page"
                     :table-loading="tableLoading"
                     @on-load="getToDoList"
                     class="avuecrud">
          </avue-crud>
        </el-collapse-item>
      </el-collapse>
    </div>
  </basic-container>
</template>

<script>
import { getReportDetail, getOtherOpninionList, getReportHistory, taskZfAuditTwo } from "@/api/pim/pim";
import { getfileinfopage } from "@/api/system"
import { getNotNull } from '@/views/util'
import { ITEM_OPINION_DIC } from "@/const/dict";
import reportDetail from "@/components/pim/report/detail"

export default {
  name: "reportTwoValidate",
  components: {
    reportDetail
  },
  created () {
    this.getReportHistory()
  },
  data () {
    return {
      historyData: [],
      option: {
        page: false,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: true,
        cellBtn: false,
          indexWidth:70,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        menuWidth: 100,
        menu: false,
        keyId: "id",
        column: [
          {
            label: "环节名称",
            prop: "taskName",
            cell: true,
            width: 120,
          },
          {
            label: "办理部门",
            prop: "assigneeNickname",
            cell: true,
            width: 180,
          },
          {
            label: "相关意见",
            prop: "opinion",
            cell: true,
          },
        ]
      },
      otherOpninionListData: [],
      otherOpninionTableOption: {
        page: true,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: false,
        cellBtn: false,
          indexWidth:70,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        menu: false,
        keyId: "id",
        column: [
          {
            label: "反馈部门",
            prop: "targetDeptName",
            width: 120,
            cell: true
          },
          {
            label: "部门意见",
            prop: "showOpinion",
            overHidden: true,
            cell: true
          },
          {
            label: "联系人",
            prop: "showContact",
            width: 100,
            cell: true
          },
          {
            label: "联系电话",
            prop: "showContactPhone",
            width: 180,
            cell: true
          },
          {
            label: "状态",
            prop: "state",
            width: 120,
            cell: true,
            dicData: ITEM_OPINION_DIC.TYPE,
          },

        ]
      },
      otherOpninionPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      otherOpninionTableLoading: false,
      headerData: {
        title: '政府办理'
      },
      activeNameshz: ['1', '2', '3'],
      reportData: ''
    }
  },
  methods: {

    getReportHistory () {
      getReportHistory(Object.assign({
        reportId: this.$route.query.reportId,
      })).then(response => {
        this.historyData = response.data.data;
      })
    },
    putData (data) {
      this.reportData = data
    },
    getOtherOpninionList (page) {
      getOtherOpninionList(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        relateId: this.$route.query.reportId,
        type: '8',
      })).then(response => {
        this.otherOpninionListData = response.data.data.records;
        this.otherOpninionPage.total = response.data.data.total;
      })
    },
    currentChange (currentPage) {
      var page = this.otherOpninionPage;
      page.currentPage = currentPage;
      this.getOtherOpninionList(page);
    },
    sizeChange (pageSize) {
      var page = this.otherOpninionPage;
      page.pageSize = pageSize;
      this.getOtherOpninionList(page);
    },
    reportTypeTransform (reportType, year) {
      switch (reportType) {
        case '2':
          return '中期评估报告';
          break;
        case '3':
          return '期末总结报告';
          break;
        case '1':
          return year + '年度监测分析报告';
          break;
      }
    },
    goBack () {
      this.$router.go(-1);
    },
    submitValidate () {
      this.$confirm("确定办理么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        taskZfAuditTwo(this.$route.params.id).then(response => {
          if (response.data.code == '0') {
            this.$message({
              message: '办理成功！',
              type: 'success'
            });
            this.$router.go(-1);
          }
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.transform-deg_two {
  /deep/.el-step__title.is-finish {
    color: black;
  }
  /deep/.el-step__line {
    transform: rotate(-11deg);
    margin-top: -17px;
  }
}
.transform-deg_line_two {
  margin-left: -248px;

  /deep/.el-step__line {
    transform: rotate(11deg);
    margin-top: 17px;
  }
}
.beian_two {
  margin-top: -62px;
  margin-left: 8px;
  /deep/.el-step__head.is-wait {
    color: #67c23a;
  }
  /deep/.el-step__main .el-step__title.is-wait {
    color: #67c23a;
  }
  /deep/.el-step__line {
    display: none;
  }
}
.step-group {
  margin: 5rem 0;
  margin-bottom: 1px;
}

.form-item {
  color: black;
  font-size: 16px;
  font-weight: 600;
}
</style>
